<template>
  <view class="body-all">
    <view class="reward-problem-sub-box"> 意见反馈<span>*</span> </view>
    <view class="show-title-reason">
      提供您对此小程序的个人建议！
    </view>
    <textarea
      class="title-sub-text"
      @input="changeNum"
      vaule="myTitleSub"
      v-model="myTitleSub"
      name="myTitleSub"
      maxlength="36"
    ></textarea>
    <view class="show-text-num"> {{ num }}/36 </view>
    <view class="sub-box">
      <button class="submit-btn" @click="confirm">提交</button>
    </view>
  </view>
</template>

<script setup>

import { ref, reactive, computed, nextTick, watch, watchEffect, onMounted } from 'vue'

//界面所需数据

// 数据：建议
let myTitleSub = ref('')
// 数据：小角标字数
let num = ref(0)
const changeNum = () => {
  num.value = myTitleSub.value.length
  // console.log(num)
}
const confirm = () => {
  console.log(myTitleSub.value)
}

const back = () => {
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
@mixin font1 {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  letter-spacing: -0.333333px;
  color: #1f2228;
}
@mixin font2 {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  color: #1f2228;
}
@mixin font3 {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #747480;
}
@mixin font4 {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  text-align: right;
  color: #9da2b1;
}
.body-all {
  min-height: 1000px;
  padding-top: 10rpx;
  background: rgb(239, 242, 250);
}
.reward-problem-sub-box {
  width: 196rpx;
  height: 21px;
  margin-left: 30rpx;
  @include font2;
  span {
    color: #ef4c25;
  }
}
.show-title-reason {
  width: 690rpx;
  height: 36px;
  @include font3;
  margin-left: 30rpx;
  margin-top: 5px;
}
.show-text-num {
  @include font4;
  margin-top: -30px;
  margin-left: 630rpx;
  position: absolute;
  z-index: 300;
}
// 最下方文本描述框
.title-sub-text {
  width: 630rpx;
  height: 93px;
  background: #ffffff;
  border-radius: 12px;
  padding-left: 30rpx;
  z-index: 200;
  padding-top: 15px;
  padding-right: 30rpx;
  margin: 0px 30rpx 0 30rpx;
}
.sub-box {
  width: 750rpx;
  background-color: #ffffff;
  border: none;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0px -6px 20px rgba(208, 214, 229, 0.2);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  // 确认
  .submit-btn {
    width: 690rpx;
    height: 44px;
    background: #0187fa;
    border-radius: 100rpx;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    margin: 11px 30rpx 12px 30rpx;
    padding-top: 20rpx;
    color: #ffffff;
  }
}
</style>
